<template>
	<div class="custom-form" style="background-color: white;">
		<el-row :gutter="15">
			<el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px" :key="showFormKey"
				v-if="showForm">
				<el-col :span="16">
					<el-form-item label-width="0" prop="field1002c76">
						<h2 align='center' style="color:undefined;font-size: nullpx;text-align: left"
							:style="{width: '100%'}">账户信息</h2>
					</el-form-item>
				</el-col>
				<!-- <el-col :span="8">
					<el-form-item label-width="0" prop="manage">
						<el-button type="primary" @click='getField104Options()' style="background-color: transparent;color: #409EFF;border: none;">管理入驻信息</el-button>
					</el-form-item>
				</el-col> -->
				<el-col :span="16">
					<el-form-item :label="$t('登录名')" prop="F_Account">
						<el-input v-model="formData['F_Account']" placeholder="请输入登录名" :disabled="true" :readonly="true"
							:style="{width: '100%'}">
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label-width="0" prop="modify">
						<el-button type="primary" @click='modify()' style="background-color: transparent;color: #409EFF;border: none;">修改账号</el-button>
					</el-form-item>
				</el-col>
				<el-col :span="16">
					<el-form-item :label="$t('手机号码')" prop="F_Telephone">
						<el-input v-model="formData['F_Telephone']" placeholder=""
							:disabled="hasDisabledPermission('F_Telephone',true)"
							:readonly="!hasEditPermission('F_Telephone',true)" clearable :style="{width: '100%'}">
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label-width="100px" prop="field103481e">
						<h2 align='center' style="color:undefined;font-size: nullpx;text-align: left"
							:style="{width: '100%'}"></h2>
					</el-form-item>
				</el-col>
				<el-col :span="2">
					<el-form-item label-width="0" prop="field103481e">
						<h2 align='center' style="color:undefined;font-size: nullpx;text-align: left"
							:style="{width: '100%'}">企业认证</h2>
					</el-form-item>
				</el-col>
				<el-col :span="14">
					<el-form-item :label="$t('')" prop="account_type" label-width="0">
						<el-input v-model="formData['account_type']" placeholder=""
							:disabled="hasDisabledPermission('account_type',false)"
							:readonly="!hasEditPermission('account_type',true)" clearable :style="{width: '100%'}"
							class="zhanghaoleixing">
						</el-input>
					</el-form-item>
				</el-col>
				<!-- <el-col :span="5" v-show="hasFormPermission('field1069c87')">
          <el-form-item :label="$t('单行文本')" prop="field1069c87">
            <el-input v-model="formData['field1069c87']" placeholder="请输入单行文本"
              :disabled="hasDisabledPermission('field1069c87',true)"
              :readonly="!hasEditPermission('field1069c87',true)" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col> -->
				<el-col :span="8">
					<el-form-item label-width="0" prop="edit">
						<el-button type="primary" @click='Edit()' style="background-color: transparent;color: #409EFF;border: none;">编辑信息</el-button>
					</el-form-item>
				</el-col>
				<el-col :span="16">
					<el-form-item :label="$t('企业名称')" prop="F_FirmName">
						<el-input v-model="formData['F_FirmName']" placeholder="请输入企业名称"
							:disabled="hasDisabledPermission('F_FirmName',true)"
							:readonly="!hasEditPermission('F_FirmName',true)" clearable :style="{width: '100%'}">
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="16">
					<el-form-item :label="$t('单位登记所在地')" prop="F_PlaceOfRegistration">
						<el-input v-model="formData['F_PlaceOfRegistration']" placeholder="请输入单位登记所在地"
							:disabled="hasDisabledPermission('F_PlaceOfRegistration',true)"
							:readonly="!hasEditPermission('F_PlaceOfRegistration',true)" clearable
							:style="{width: '100%'}"></el-input>
					</el-form-item>
				</el-col>
				<el-dialog title="修改账号"  v-dialogDrag :append-to-body="true" width="30%" :visible.sync="flag"
					:class="isWorkflowForm ? 'work-form-dialog' : ''" :show-close="!isWorkflowForm">
					<ModifyInformation v-if="flag" :isEdit="isEdit" :disabled="disabled" @onChange="dialogChange"
						:keyValue="keyValue"></ModifyInformation>
				</el-dialog>
				<el-dialog title="认证企业"  v-dialogDrag :append-to-body="true" :fullscreen="true" :visible.sync="flag2"
					:class="isWorkflowForm ? 'work-form-dialog' : ''" :show-close="!isWorkflowForm">
					<EditInformation v-if="flag2" :isEdit="isEdit2" :disabled="disabled2" @onChange="dialogChange2"
						:keyValue="keyValue2"></EditInformation>
				</el-dialog>
				<!-- <el-col :span="24" >
          <el-form-item size="large" v-if="isEdit" class="form-button-center">
            <el-button type="primary" @click="submitForm" :loading="submitLoading">
              {{submitLoading?$t('workFlow.WFMenu.hintSubmit'):$t('submit')}}</el-button>
            <el-button @click="cancelForm">{{$t('cancelText')}}</el-button>
          </el-form-item>
        </el-col> -->
			</el-form>
		</el-row>
	</div>
</template>
<script>
	import authorizeMixin from "@/mixins/authorize";
	import {
		baseUrl
	} from "@/config/env";
	import request from "@/router/axios";
	import ModifyInformation from './ModifyInformation';
	import EditInformation from './EditInformation';
	import {
		fieldsConfig,
		formFieldsMap,
		getHideComponents
	} from './BasicInformationConfig'
	import {
		formValidateNotice
	} from '@/util/util';
	export default {
		mixins: [authorizeMixin],

		components: {ModifyInformation,EditInformation},
		props: ['keyValue', 'isEdit', 'disabled'],
		data() {
			return {
				userInfo: {},
				keyValue: '',
				keyValue2: '',
				flag: false,
				isEdit: true, // 查看-不显示按钮,
				disabled: false, // 查看-禁用input,
				flag2: false,
				isEdit2: true, // 查看-不显示按钮,
				disabled2: false, // 查看-禁用input,
				submitLoading: false,
				showForm: true,
				showFormKey: 1,
				reRenderSubform: false,
				operationVal: 'add',
				isAdd: true,
				addressUrl: 'basicinformation',
				autoCompleteConfEventData: [],
				mainTableName: 'table06438',
				formConfig: {},
				formFieldsMap: new Map(),
				hideComponentsMap: new Map(),
				needShowValueTags: ['asso-popup', 'mutiple-popup'],
				formData: {
					'field1002c76': '',
					'manage': '',
					'F_Account': '',
					'modify': '',
					'F_Telephone': '',
					'modifyphone': '',
					'field103481e': '',
					'account_type': '',
					'edit': '',
					'F_FirmName': '',
					'F_PlaceOfRegistration': '',
				},
				rules: {
					F_Account: [],
					F_Telephone: [],
					account_type: [],
					field1069c87: [],
					F_FirmName: [],
					F_PlaceOfRegistration: [],
				},
			}
		},
		computed: {},
		watch: {},
		async created() {
			// this.formConfig = this.getFormConfig();
			// this.formFieldsMap = this.getFormFieldsMap();
			// this.userInfo = localStorage.getItem("avue-userInfo") ? JSON.parse(localStorage.getItem(
			//   "avue-userInfo")).content : {};
			this.getFormData();
		},
		async mounted() {
			// this.hideComponentsMap = await this.getHideComponentsMap();
			// this.showForm = false;
			// await this.insertCreatedEvent();
			//TODO   再这里做数据回填 请求表单数据

			//        if(this.keyValue){
			//           this.isAdd = false;
			//       }
			//        if(!this.isAdd&&this.keyValue){
			//           this.operationVal = 'edit';
			//           try {
			//             let res = await request({
			//               url: baseUrl + '/t_barin_user_registration/getLoginUserInfo',
			//               method: "get",
			//             });

			//         this.formData = res.data.data

			//               await this.handleEdit();
			//              this.showFormKey++;
			//           } catch (error) {
			//           }
			//       }


			// await this.insertMountedEvent();
			// this.reRenderSubform = true; //子表单显示
			// this.showFormKey++;
			// this.processParameterAssignment();
			// this.showForm = true;
		},
		methods: {
			getFormData() {
				axios({
						url: baseUrl + '/t_barin_user_registration/getLoginUserInfo',
						method: 'get',
					}).then(res => {
						this.formData = res.data.data;
						localStorage.setItem('fuserid',res.data.data.fuserid);
						if (res.data.data.F_UserId == res.data.data.F_MerchantId) {
							this.formData.account_type = "主账号"
						} else {
							this.formData.account_type = "子账号"
						}
						// console.log(this.formData.account_type)
					})
					.catch(error => {
						console.error('数据异常!', error);
					});
			},
			// getFormData() {
			//   let key = this.mainTableName + 'Entity';
			//   let returnParams = {};
			//   returnParams[key] = this.formData;
			//   return {
			//     ...returnParams,
			//   };
			// },
			validateForm() {
				this.$refs['elForm'].validate(valid => {});
			},
			async aysncValidateForm() {
				let validataArry = []
				let formValidateNotice = function formValidateNotice(obj, that, formAuth) {
					for (var o in obj) {
						if (!formAuth[o] && obj[o][0]) {
							that.$message({
								message: obj[o][0].message + ',' + that.$t('noFormAuth'),
								type: 'warning'
							});
							return;
						}
					}
				}
				validataArry.push(new Promise((resolve, reject) => {
					this.$refs['elForm'].validate((valid, object) => {
						if (!this.isWorkflowForm) formValidateNotice(object, this, this
							.formEnCodeList)
						resolve(valid)
					})
				}))
				let res = await Promise.all(validataArry)
				if (res.includes(false)) {
					return false
				} else {
					return true;
				}
			},
			changeTableData() {},
			// async submitForm() {
			//   this.submitLoading = true;
			//   let valid = await this.aysncValidateForm();
			//   if (valid == false) {
			//     this.submitLoading = false;
			//     return false;
			//   }
			//   this.changeTableData();
			//   //格式化数据
			//   let newObj = this.getFormData();

			//     //如果没有传入参数就是新增
			//     if (!this.keyValue) {

			//       request({
			//         url: baseUrl + "/"+this.addressUrl,
			//         method: "post",
			//         data : newObj
			//       }).then((res) => {
			//         this.submitLoading = false;
			//         this.$notify({
			//           title: "成功",
			//           message: "新增成功",
			//           type: "success",
			//         });
			//          this.$emit("onChange",true)
			//       });

			//     }
			//     else{

			//      request({
			//         url: baseUrl + "/"+this.addressUrl+"/" + this.keyValue,
			//         method: "put",
			//         data : newObj
			//       }).then((res) => {
			//         this.submitLoading = false;
			//         this.$notify({
			//           title: "成功",
			//           message: "修改成功",
			//           type: "success",
			//         });
			//          this.$emit("onChange",true)
			//       });

			//     }




			//   await this.handleSubmit();
			// },
			cancelForm() {
				this.$emit("onChange", true)
			},
			formatTree(data, valueField, lableField, childField, type) {
				let tree = [];
				data.forEach((node, index) => {
					let newNode = {
						value: node[valueField],
						label: node[lableField],
					};
					if (type) {
						newNode.disabled = node[valueField] == undefined ? true : false
					}
					tree.push(newNode);
					if (node[childField] != null && node[childField].length > 0) {
						newNode.children = (this.formatTree(node[childField], valueField, lableField, childField,
							type));
					}
				}, this);
				return tree;
			},

			//辅助编辑 预留方法
			async handleEdit() {
				await this.insertEditEvent();
			},

			//FORM_EVENT_EDIT

			//辅助提交 预留方法
			async handleSubmit() {
				await this.insertSubmitEvent();
			},
			//辅助工作流提交 预留方法
			getHandleSubmitFormEvent() {

			},
			//辅助工作流表单事件 判断 表单事件是否已经执行过
			getisExecutedFormEvent() {
				let key = 'index' + this.$store.state.formParser.workflowFormTabIndexKey;
				return this.$store.state.formParser.isExecutedFormEvent[key] ? this.$store.state.formParser
					.isExecutedFormEvent[key] : false;

			},

			async getField104Options() {
				// 注意 this.$axios是通过Vue.prototype.$axios = axios挂载产生的
				try {} catch (error) {}
			},
			modify() {
				this.disabled = false;
				this.keyValue = null;
				this.flag = true;
				this.isEdit = true;
			},
			Edit() {
				this.disabled2 = false;
				this.keyValue2 = null;
				this.flag2 = true;
				this.isEdit2 = true;
			},
			/* 弹窗回调 */
			 dialogChange(b){
			     this.flag = false;
			     this.$nextTick(()=>{
			     this.getFormData();
			})},
			dialogChange2(b){
			     this.flag2 = false;
			     this.$nextTick(()=>{
			     this.getFormData();
			})},
			async getField110Options() {
				// 注意 this.$axios是通过Vue.prototype.$axios = axios挂载产生的
				try {} catch (error) {}
			},
			async getField111Options() {
				// 注意 this.$axios是通过Vue.prototype.$axios = axios挂载产生的
				try {} catch (error) {}
			},
			async triggerEventHandler(eventData) {
				if (eventData.length > 0) {
					eventData.forEach(ele => {
						let functionName = 'getField' + ele.componentFormId + 'Options';
						if (typeof this[functionName] == "function") {
							this[functionName]();
						}
					})
				}
			},
			triggerEventFormIdHandler(formId) {
				if (this.formFieldsMap.get(formId).__config__.triggerEvents && this.formFieldsMap.get(formId).__config__
					.triggerEvents.length > 0) {
					this.formFieldsMap.get(formId).__config__.triggerEvents.forEach(triggerEventItem => {
						if (this.formFieldsMap.get(formId).__config__.triggerEventData && this.formFieldsMap.get(
								formId)
							.__config__.triggerEventData[triggerEventItem] && this.formFieldsMap.get(formId)
							.__config__
							.triggerEventData[triggerEventItem].length > 0) {
							this.triggerEventHandler(this.formFieldsMap.get(formId).__config__.triggerEventData[
								triggerEventItem]);
						}
					});
				}
				return true;
			},
			//清空联想弹层、多选弹层的值
			clearBombLayerFormData(filed) {
				this.formData[filed] = '';
				this.formData[filed + '_showValue'] = '';
			},
			// 流程参数赋值
			processParameterAssignment() {
				// 流程中的流程参数赋值 优先级最高，最后赋值
				setTimeout(() => {
					if (this.isEdit != 2 && this.parameter && this.parameter[this.mainTableName]) {
						this.showForm = false;
						for (let [key, value] of Object.entries(this.parameter[this.mainTableName])) {
							this.setFormDataValue(key, value);
						}
						this.showForm = true;
					}
				}, 0);
			},
			setFormDataValue(field, val) {
				if (Array.isArray(this.formData[field])) {
					if (val.includes(',')) {
						this.formData[field] = val.split(',');
					} else {
						this.formData[field] = [val];
					}
				} else {
					this.formData[field] = val;
				}
				//处理联想弹层，多选弹层
				if (this.formData[field + '_showValue'] != undefined) {
					this.formData[field + '_showValue'] = val;
				}
			},
			setOutputsValue(nodeType, formId, res, outputKey) {
				let nodeTypeChecked = false;
				if (nodeType == 'created') {
					nodeTypeChecked = this.operationVal == 'add';
				} else if (nodeType == 'edit') {
					nodeTypeChecked = this.operationVal == 'edit';
				} else if (nodeType == 'mounted') {
					nodeTypeChecked = this.operationVal == 'add' || this.operationVal == 'edit';
				}
				if (nodeTypeChecked && this.disabled != true && res && res.data && res.data.data && this.formFieldsMap
					.has(formId) && this.formFieldsMap.get(formId).__vModel__ && this.formData.hasOwnProperty(this
						.formFieldsMap.get(formId).__vModel__)) {
					this.setFormDataValue(this.formFieldsMap.get(formId).__vModel__, res.data.data[outputKey]);
					// 联想弹层 多选弹层 特殊处理
					if (this.formFieldsMap.get(formId).__config__ && this.formFieldsMap.get(formId).__config__.avueType &&
						this.needShowValueTags.includes(this.formFieldsMap.get(formId).__config__.avueType)) {
						this.formData[this.formFieldsMap.get(formId).__vModel__ + '_showValue'] = res.data.data[outputKey];
					}
					this.triggerEventFormIdHandler(formId);
				}
			},
			//子表单权限
			getAuthorityTableChildrenList(bindTable, children) {
				let column = [];
				if (bindTable && this.formEnCodeList && this.formEnCodeList[bindTable]) {
					let formSubEnCodeList = this.formEnCodeList[bindTable];
					if (children && children.length > 0) {
						column = children.map(ele2 => {
							if (formSubEnCodeList.includes(ele2.prop)) {
								ele2.hide = false;
							} else {
								ele2.hide = true;
							}
							if (ele2.hide == false) {
								//工作流中系统表单必填权限
								if (this.formSubTableNotRequiredList && this.formSubTableNotRequiredList[
									bindTable] !=
									undefined) {
									if (this.formSubTableNotRequiredList[bindTable].includes(ele2.prop)) {
										ele2.required = false;
									} else {
										ele2.required = true;
									}
								}
								ele2.rules = [];
								if (ele2.required) {
									ele2.rules = ele2.ruleList;
								}
								// disabled 属性
								if (this.formSubTableDisabledList && this.formSubTableDisabledList[bindTable] !=
									undefined) {
									if (this.formSubTableDisabledList[bindTable].includes(ele2.prop)) {
										ele2.disabled = true;
									} else {
										ele2.disabled = false;
									}
								}
								if (this.disabled) { //查看
									ele2.disabled = true;
								}
							} else {
								ele2.rules = []
								if (ele2.required) {
									ele2.ruleList.forEach(el => {
										el.message += ',' + this.$t('noFormAuth')
									})
									ele2.rules = ele2.ruleList;
								}
							}
							return ele2;
						});
					}
					return column;
				} else {
					return children;
				}
			},
			async insertCreatedEvent() {

			},
			async insertMountedEvent() {

			},
			async insertEditEvent() {

			},
			async insertSubmitEvent() {

			},
			getFormConfig() {
				return fieldsConfig();
			},
			getFormFieldsMap() {
				return formFieldsMap();
			},
			async getHideComponentsMap() {
				let mapList = new Map();
				let hideComponentList = this.getHideComponents();
				if (typeof this.initHideComponentList == 'function') {
					mapList = await this.initHideComponentList(hideComponentList);
					this.$store.commit("SET_HIDE_COMPONENT_LIST", mapList);
				}
				return mapList;
			},
			getHideComponentsMapItem(key) {
				if (this.hideComponentsMap.size > 0) {
					return this.hideComponentsMap.has(key) ? this.hideComponentsMap.get(key) : "";
				} else {
					return ""
				}
			},
			getHideComponents() {
				return getHideComponents();
			},
		}
	}
</script>
<style>
	.el-table__empty-block {
		width: 100% !important;
	}

	.avue-form__row {
		padding: 0 !important;
	}

	#editorphone {
		width: 375px;
		margin: 0 auto;
		border: 1px solid #E4E7ED;
		padding: 0 7.5px;
		background: #f5f6fa;
		height: 700px;
		overflow-y: auto;
		overflow-x: hidden;
		border-radius: 5px;
	}

	#editorphone .el-col {
		border-bottom: 1px solid #F2F2F2;
		background: #fff;
		margin-bottom: 0;
		padding: 0 15px 6px !important;
		width: 100%;
	}

	#editorphone .el-form-item__label {
		line-height: 20px
	}

	#editorphone .el-input-group .el-input__inner {
		background: #f5f6fa
	}

	#editorphone .el-input__inner {
		border: 0
	}

	#editorphone .el-input-group__append,
	#editorphone .el-input-group__prepend {
		border: 0;
		background: #edeef2;
		color: #666;
	}

	#editorphone .el-input-group .el-input__prefix {
		left: 44px
	}

	#editorphone .el-input-group .el-input__suffix {
		right: 44px
	}

	#editorphone .el-form-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-flow: wrap;
	}

	#editorphone .el-form-item__label {
		float: none;
		min-width: 85px;
		width: auto !important;
		text-align: left;
		flex: auto;
	}

	#editorphone .tinymce .el-form-item__label {
		min-width: 100%;
	}

	#editorphone .el-form-item__content {
		margin-left: 0px !important;
		flex: auto;
		width: calc(100% - 95px);
	}

	#editorphone .avueFormNoLable .el-form-item__label,
	#editorphone .avueFormNoLable .avue-crud__pagination {
		display: none;
	}

	#editorphone .avueFormNoLable .el-collapse-item__wrap,
	#editorphone .avueFormNoLable .el-collapse {
		border-bottom: 0
	}

	#editorphone .avueFormNoLable .el-col {
		border-bottom: 0;
		padding-bottom: 0
	}

	#editorphone .el-form-item__content .el-button:first-child {
		margin-left: 90px;
	}

	.zhanghaoleixing input {
		border: none;
		background-color: white;
		float: left;
		font-weight: bold;
		margin-top: 15px;
		margin-left: -50px;
	}
/* 
	.el-button {
		background-color: transparent;
		color: #409EFF;
		border: none;
	}

	.el-button:hover {
		background-color: transparent;
		color: rgba(64, 158, 255, 0.5);
		border: none;
	}

	.el-button:focus {
		background-color: transparent;
		/* 点击后的背景颜色 */
		/* color: rgba(64, 158, 255, 0.5);
		border: none; */
		/* 点击后的文本颜色 */
	/* }
 */
	/* .el-button:not(:focus) {
		background-color: transparent;
		color: #409EFF;
		border: none;
	} */
</style>
